<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  beforeCreate() {
    //#region
    // 启动时间
    sessionStorage.setItem("track_entryTime", new Date().getTime());
    // 启动事件
    this.$dhtrack.trackEvent("openApp", {});
    //#endregion
  },
  mounted() {
    //#region
    // 关闭浏览器上报埋点退出事件
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    //#endregion
  },
  destroyed() {
    //#region
    // 关闭浏览器上报埋点退出事件
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    //#endregion
  },
  methods: {
    //#region
    // 关闭窗口之前执行
    beforeunloadHandler(e) {
      let newTime = new Date().getTime();
      let duringTime = newTime - sessionStorage.getItem("track_entryTime");
      let title = this.$route.meta.title || "首页";
      let url = this.$route.path || "/index";
      this.$dhtrack.trackEvent("viewPage", {
        // 页面名称、页面路径
        title,
        // 当前页面路径
        url,
        // 原路径-要返回的页面路径
        oldPage: sessionStorage.getItem("track_oldPage"),
        // 页面停留时长
        duringTime,
      });
      // 【 埋点上报-退出事件-quit 】
      this.$dhtrack.trackEvent("quit", {
        oldUrl: sessionStorage.getItem("track_oldPage"),
      });
      window.close();
    },
    //#endregion
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 736px;
  margin: 0 auto;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
